<template>
  <div>
    
    <div class="cz-head">
      <h3>操作日志</h3>
      <el-button type="danger" @click="change" :disabled="!isdata">all delete</el-button>
      <!-- <button >全部删除</button> -->
    </div>
    
    <div class="has-data" v-if="isdata">
      <el-table :data="operatelist" style="width: 100%">
        <el-table-column prop="operatetime" label="日期" width="180"> </el-table-column>
        <el-table-column prop="operatename" label="操作者" width="180"> </el-table-column>
        <el-table-column prop="operateip" label="ip地址"> </el-table-column>
        <el-table-column prop="operatecity" label="地址"> </el-table-column>
        <el-table-column prop="operatetype" label="操作类型"> </el-table-column>
      </el-table>
    </div>
    <div class="no-data" v-else>
      <el-empty description="暂无操作"/>
    </div>
    <page :pagesize="size" :total="testoperatelist.length" 
    @changepagenum="changepage" 
    @turnright="turnright"
    @turnleft="turnleft"></page>
  </div>
</template>

<script>
import page from '../../../components/page/page.vue'

export default {
    inject: ['reload'],
    name: 'setting',
    components: {
      page
    },
    data() {
      return {
        isdata: true,
        operatelist: [],
        testoperatelist: [],
        size: 5
      }
    },
    methods: {
      change() {
        // this.isdata = !this.isdata
        localStorage.removeItem('localoperatelist')
        // operate('admin',"增加用户1")
        this.reload()
      },
      changepage(val) {
        console.log('接收信息' + val)
        let over = this.size * val
        let start = val - 1
        this.operatelist = this.testoperatelist.slice(start*this.size,over)
      },
      turnright(val){
        console.log("跳转页面" + val)
        let over = this.size * val
        let start = val - 1
        this.operatelist = this.testoperatelist.slice(start*this.size,over)
      },
      turnleft(val) {
        let over = this.size * val
        let start = val - 1
        this.operatelist = this.testoperatelist.slice(start*this.size,over)
      }
    },
    beforeMount() {
      //组件加载时判断是否有操作信息
      let test = JSON.parse(localStorage.getItem('localoperatelist'))
      if(!test) {
        this.isdata = false
      }else {
        this.testoperatelist = [...test]
        this.operatelist = this.testoperatelist.slice(0,this.size )
      }
    }

}
</script>

<style scoped>
.cz-head {
  width: 100%;
  height: 50px;
  line-height: 50px;
  /* text-align: center; */
  font-size: 24px;
  display: flex;
  position: relative;
  background-color: #fff;
  margin-bottom: 5px;
}
.cz-head h3 {
  margin-left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
}
.cz-head button {
  border: none;
  width: 100px;
  height: 40px;
  top: 8px;
  color: #fff;
  /* background-color: #ccc; */
  border-radius: 8px;
  position: absolute;
  right: 10px;
}
.has-data {
  width: 100%;
  height: 100vh;
  background-color: #fff;
}
/* .el-table-column {
  height: 100px;
} */
.no-data {
  
  width: 500px;
  height: 500px;
  margin: 0 auto;
  background-color: #fff;
}
</style>